<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="收货查询" left-arrow @click-left="$router.go(-1)"></van-nav-bar>




		<div class="goodsFromWarp">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">工号：</div>
						</div>

						<van-field
							 class="skuInput"
							 v-model="editForm.opid"
							 placeholder="请填写工号"
						 />
				</div>


				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">开始时间：</div>
						</div>


						<div class="skuNoInput">
							{{editForm.fdate}}
						</div>


						<div class="searchBtn">
							<button :disabled="isdisabled"  @click.stop="searchTime('start')" >
								<van-icon name="ellipsis" color="#1989fa"  />
							</button>
						</div>
				</div>

				<div class="goodsInputWarp">
						<div class="goodsInputLabel">
							<div class="goodsInputBorder"></div>
							<div class="skuName">结束时间：</div>
						</div>


						<div class="skuNoInput">
							{{editForm.tdate}}
						</div>


						<div class="searchBtn">
							<button :disabled="isdisabled"  @click.stop="searchTime('end')" >
								<van-icon name="ellipsis" color="#1989fa"  />
							</button>
						</div>
				</div>



		</div>

				<!-- <div class="goodsFromWarp" >
						<div class="goodsInputWarp">
								<div class="goodsInputLabel">
									<div class="goodsInputBorder"></div>
									<div class="skuName">门店：</div>
								</div>


								<div class="skuNoInput">
									{{skuData[index].storename}}
								</div>


								<div class="searchBtn">
									<button :disabled="isdisabled"  @click.stop="_getSku()" >
										<van-icon name="ellipsis" color="#1989fa"  />
									</button>
								</div>
						</div>

				</div> -->








		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="searchBtn('ZX')">查装卸</van-button>
			<van-button type="info" :disabled="isdisabled" @click="searchBtn('SH')">查收货</van-button>
		</div>

		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="searchBtn('SJ')">查上架</van-button>
		</div>


		<!-- 时间 -->
		<van-popup v-model="isTimeShow" position="bottom" :style="{ height: '250px' }" >
		    <van-datetime-picker
		        v-model="currentMonthDate"
		        type="date"
		        title="选择年月"
		        :min-date="minMonthDate"
		        :max-date="maxMonthDate"
		        :formatter="formatterMonth"
		        @confirm="selectMonthConfirm"
		    />
		</van-popup>



		<div class="carCardWarp" v-if="editForm.djtype == 'SJ'">
			<div class="carCard" v-for="(item,index) in tableData" :key="index">

				<div class="goodsTitleRow" style="margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">收货单：</div>
						</div>
						<div class="skuNoTitle">
							{{item.bill}}
						</div>
				</div>

				<div class="goodsTitleRow">
						<div class="goodsTitleLabel">
							<div class="skuName">商品名称：</div>
						</div>
						<div class="skuNoTitle">
							{{item.subsname}}
						</div>
				</div>

				<div class="goodsTitleRow" style="margin-top: 10px;margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">商品编码：</div>
						</div>
						<div class="skuNoTitle">
							{{item.itemid}}
						</div>
				</div>
				<van-row class="goodRow" >
				  <van-col span="12"> <span>收货口:</span> {{item.sh_cwno}}</van-col>
					<van-col span="12"> <span>目标仓位:</span> {{item.mb_cwno}}</van-col>
				</van-row>


				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="12"> <span>箱数:</span> {{item.pack}}</van-col>
				  <van-col span="12"> <span>箱装:</span> {{item.unit}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="12"> <span>散数:</span> {{item.qty}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>生产日期:</span> {{item.p_date}}</van-col>
				</van-row>
				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>上架日期:</span> {{item.sj_date}}</van-col>
				</van-row>
			</div>
		</div>


		<div class="carCardWarp" v-if="editForm.djtype == 'SH'">
			<div class="carCard" v-for="(item,index) in tableData" :key="index">

				<div class="goodsTitleRow" style="margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">收货单：</div>
						</div>
						<div class="skuNoTitle">
							{{item.bill}}
						</div>
				</div>

				<div class="goodsTitleRow">
						<div class="goodsTitleLabel">
							<div class="skuName">商品名称：</div>
						</div>
						<div class="skuNoTitle">
							{{item.subsname}}
						</div>
				</div>

				<div class="goodsTitleRow" style="margin-top: 10px;margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">商品编码：</div>
						</div>
						<div class="skuNoTitle">
							{{item.itemid}}
						</div>
				</div>
				<van-row class="goodRow" >
				  <van-col span="12"> <span>收货口:</span> {{item.sh_cwno}}</van-col>
					<van-col span="12"> <span>目标仓位:</span> {{item.mb_cwno}}</van-col>
				</van-row>


				<van-row class="goodRow" style="margin-top: 10px;">
					 <van-col span="12"> <span>入库标签:</span> {{item.shserno_s}}</van-col>
				  <van-col span="12"> <span>箱数:</span> {{item.pack}}</van-col>

				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
					<van-col span="12"> <span>箱装:</span> {{item.unit}}</van-col>
				  <van-col span="12"> <span>散数:</span> {{item.qty}}</van-col>
				</van-row>

				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>生产日期:</span> {{item.p_date}}</van-col>
				</van-row>
				<van-row class="goodRow" style="margin-top: 10px;">
				  <van-col span="24"> <span>上架日期:</span> {{item.sj_date}}</van-col>
				</van-row>
			</div>
		</div>



		<div class="carCardWarp" v-if="editForm.djtype == 'ZX'">
			<div class="carCard" v-for="(item,index) in tableData" :key="index">
				<div class="goodsTitleRow" style="margin-bottom: 10px;">
						<div class="goodsTitleLabel">
							<div class="skuName">预检单号：</div>
						</div>
						<div class="skuNoTitle">
							{{item.bill}}
						</div>
				</div>
				<van-row class="goodRow" >
				  <van-col span="12"> <span>托盘数:</span> {{item.t_tp}}</van-col>
					<van-col span="12"> <span>卸货人数:</span> {{item.topid}}</van-col>
				</van-row>
			</div>
		</div>






	</div>
</template>

<script>

export default {
  name: 'shouhuochaxun',
  data() {
    return {
			editForm:{
				opid:'',
				fdate:'',
				tdate:'',
				djtype:'',
			},
			isdisabled:false,
			lingquData:[],
			isTimeShow:false,
			isTimeMode:'',
			currentMonthDate: new Date(),
			minMonthDate: new Date(2020,0,1),
			maxMonthDate: new Date(2099,10,1),
			tableData:[
				{
					bill:'',
				}
			],
		};
  },
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
		formatterMonth(type, val) {
		    if (type === 'year') {
		        return `${val}年`;
		    } else if (type === 'month') {
		        return `${val}月`;
		    }else if (type === 'day') {
		        return `${val}日`;
		    }
		    return val;
		},
		selectMonthConfirm(value){
			if(this.isTimeMode == 'start'){
			    this.editForm.fdate = this.format_yyyyMMdd(value);
			}else if(this.isTimeMode == 'end'){
			    this.editForm.tdate = this.format_yyyyMMdd(value);
			}
			this.isTimeShow = false
		},
		searchTime(val){
			this.isTimeMode = val
			this.isTimeShow = true
			console.log(this.isTimeMode)
		},
		searchBtn(val){
			this.editForm.djtype = val
			var _self = this;
			_self.$store.commit('showLoading');
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_shouhuo',
					'i':this.FNULLE([
					'opmode','Y_SHQRY_qrybill',
					'czyid',this.ryuser.operatorid,
					'kqid', this.ryuser.kqid,
					'djtype',this.editForm.djtype,
					'fdate',this.editForm.fdate,
					'tdate',this.editForm.tdate,
					'opid',this.editForm.opid,
				])
				},'整件分拨领取任务',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.lingquData = rtn_json_obj
					console.log("得到领取任务")
					console.log(rtn_json_obj)
					_self.tableData = rtn_json_obj
					if(_self.tableData.length > 0){
					}else{
						_self.$toast.fail('暂无获取商品详情')
					}
				}
			});
		},
  },
  mounted() {
     this.editForm.fdate = this.format_yyyyMMdd(new Date());
		 this.editForm.tdate = this.format_yyyyMMdd(new Date());
  },
	components: {

	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}


	div.carCardWarp{
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
		margin-top: 20px;
		font-size:20px;
		font-weight: bold;
		div.carCard{
			border-left: 5px solid #4998FF;
			box-sizing: border-box;
			padding-left: 10px;
			padding-right: 10px;
			border-radius:5px;
			background-color: #fff;
			padding-top: 10px;
			padding-bottom: 10px;
			margin-bottom:15px;
			div.goodRow{
				margin-bottom:8px;
				span{
					display: inline-block;
					width:100px;
				}
			}
			div.goodsTitleRow{
				display: flex;
				width: 100%;
				div.goodsTitleLabel{
					width: 100px;
				}
				div.skuNoTitle{
					width: calc(100% - 100px);
				}
			}
		}
	}

</style>
